<template>
    <div class="slide-tool">
        <a href="javascript:;" v-if="type == 'refresh'" target="_self" @click="refresh">
            <i class="uicon uicon-refresh"></i>
        </a>
        <a href="javascript:;" target="_self" v-show="top" @click="goTop">
            <i class="uicon uicon-gotop"></i>
        </a>

        <a href="javascript:;" v-if="type == 'comment'" v-show="top" target="_self" @click="comment">
            <i class="uicon uicon-comment"></i>
        </a>
    </div>
</template>
<script>
export default {
    name:"slide-tool",
    props:{
        type:{
            type:String,
            default:'refresh'
        }
    },
    data(){
        return {
            top:false
        }
    },
    mounted(){
        this.$on('toggleTop',flag=>{
            this.top = flag;
        })
    },
    methods:{
        refresh(){
            this.$parent.$emit('slide-refresh');
        },
        goTop(){
            this.$parent.$emit('slide-gotop');
        },
        comment(){
            this.$parent.$emit('slide-comment');
        }
    }
}
</script>

<style lang="less">
.slide-tool {
    position: fixed;
    right:24px;
    bottom:15%;
    z-index:100;
    a {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color:rgba(230, 74, 25,.9);
        width:70px;
        height:70px;
        border-radius:6px;
        box-shadow: 0 0 2px rgba(63,65,70,.4);

        i {
            transform:scale(.7)
        }
    }

    a + a {
        margin-top:40px;
    }
}
</style>

